<template>
  <a-spin :spinning="loading">
    <div class="wrap" >
      tab1
    </div>
  </a-spin>
</template>
<script setup lang="ts">
import { CodeSandboxCircleFilled } from '@ant-design/icons-vue'
import { ref, onMounted, watch, watchEffect } from 'vue'
const props = defineProps({
  status: Boolean
})
const emit = defineEmits(['changeStatus'])

const loading = ref(false)

const getTabList = (() => {
  loading.value = true
  setTimeout(() => {
    console.log('tab2--res-data')
    loading.value = false
  }, 3000)
})
onMounted(() => {
  getTabList()
})

watch(
  () => props.status,
  (newVal) => {
    if (newVal) {
      console.log('tab2---??????????????????')
      getTabList()
      emit('changeStatus', 'tab2')
    }
})

</script>
<style scoped lang="scss">
.wrap {
  height: 80px;
  border: 1px solid silver;
}
</style>